import React from 'react'
import { Upload, message, Icon } from 'antd'

class VideoUpload extends React.Component {
    beforeUpload = file => {
        const isType = file.type === 'video/mp4' || file.type === 'video/rmvb' || file.type === 'video/mov' || file.type === 'video/avi'
        const isLt100M = file.size / 1024 / 1024 < 100

        if (!isType) {
            message.info('仅支持.mp4、.rmvb、.mov、.avi格式！')
            return isType
        }

        if (!isLt100M) {
            message.info('视频大小不能超过100MB！')
            return isLt100M
        }
    }

    handleChange = ({ file, fileList }) => {
        if (file.response && file.response.code !== 1) {
            message.info(file.response.data)
            this.props.onChangeState({ videoUrl: [] })
            return
        }

        if (!file.status) {
            this.props.onChangeState({ videoUrl: [] })
            return
        }

        if (file.status === 'done') {
            this.props.onChangeFormData('video', file.response.data)
        }

        this.props.onChangeState({ videoUrl: fileList })
    }

    handleRemove = () => {
        this.props.onChangeFormData('video', '')
    }

    render() {
        const { fileUrl } = this.props
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">上传视频</div>
            </div>
        )

        return (
            <Upload 
                action="api/UploadFile/UploadVideo"
                accept="video/mp4, video/rmvb、, video/mov、, video/avi"
                headers={{ Authorization: localStorage.token }}
                listType="picture-card"
                fileList= { fileUrl }
                beforeUpload={ this.beforeUpload }
                onChange={ this.handleChange }
                onRemove={ this.handleRemove }
            >
                { fileUrl.length ? null : uploadButton }
            </Upload>
        )
    }
}

export default VideoUpload